const defaultImg = '@/assets/images/200.png'
//  使用的是webpack require.context(路径【表示公共的组件的目录】,文件深入循环查找【bool】,正则【最终要使用的组件】 )
const requireComponent = require.context('./library', true, /.vue$/)
// console.log(requireComponent.keys(), 3344222)
export default {
  install (Vue) {
    requireComponent.keys().forEach((item) => {
      // console.log(requireComponent[item], 77)  //  ['./bread.vue', './pubArt.vue', './qq/q.vue']
      /* 获取的是 每一个组件暴露出来的对象 */
      const defaultObj = requireComponent(item).default
      Vue.component(defaultObj.name, defaultObj)
    })
    // 注册时F开头 是函数  其他的 是对象
    // // 注册自定义指令
    Vue.directive('lazy', {
      // inserted () {
      //   console.log(11111)
      // }
      mounted (el, binding) {
        // 浏览器提供 IntersectionObserver
        const observer = new IntersectionObserver(
          ([{ isIntersecting }]) => {
            // console.log(isIntersecting, '====IntersectionObserver')
            if (isIntersecting) {
              console.log(el, binding, 11111)
              // 图片加载失败就显示默认图片
              el.onerror = function () {
                el.src = defaultImg
              }
              el.src = binding.value
              // 不在监听dom===stop()
              observer.unobserve(el)
            }
          },
          {
            threshold: 0.01
          }
        )
        // 监听dom
        observer.observe(el)
      }
    })
  }
}
